﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机构设置</title>
    <!-- 引入样式 -->

    @* <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script> *@
    <script src="~/lib/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <script src="//unpkg.com/element-plus"></script>

    <style>
        a {
            text-decoration: none; /* 去除下划线 */
        }
        /* 添加页面背景色 */
        body {
            background-color: #FFFFCC; /* 示例浅灰色，可替换为你的图片主色值 */
        }

        .el-table {
            background-color: white; /* 表格白底，与背景色区分 */
        }
    </style>

</head>
<body>

    <!-- Vue 挂载点 -->
    <div id="app">
        <span>您正在做的业务是:人力资源管理--薪酬标准管理--薪酬标准登记复核</span><br />

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="standard_id" label="薪酬标准编号" width="180"></el-table-column>
            <el-table-column prop="standard_name" label="薪酬标准名称" width="180"></el-table-column>
            <el-table-column prop="designer" label="制定人" width="180"></el-table-column>
            <el-table-column prop="regist_time" label="登记时间" width="180"></el-table-column>
            <el-table-column prop="salary_sum" label="薪酬总额" width="180"></el-table-column>
            <el-table-column label="复核" width="180">
                <template #default="scope">
                    <a :href="`/SS_Server/Update?sid=${scope.row.standard_id}`">
                        复核
                    </a>
                    @* <!-- 使用 Vue 事件处理，而非传统 <a> 标签 -->
                    <el-button type="primary" size="small" @click ="handleEdit(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click ="handleDelete(scope.row)">删除</el-button> *@
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1, 2, 4,6]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       prev-text="上一页"
                       next-text="下一页">
        </el-pagination>
    </div>



    <script type="text/javascript">
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                const tableData = ref([]);
                const currentPage = ref(1);
                const pageSize = ref(2);
                const total = ref(0);
                const handleSizeChange = (newSize) => {
                  pageSize.value = newSize;
                  fill();
                };
                const handleCurrentChange = (newPage) => {
                  currentPage.value = newPage;
                  fill();
                };

                function fill() {
                  axios.get(`/SS_Server/Index2?i=${currentPage.value}&p=${pageSize.value}`)
                  .then(res => {
                      console.info(res.data);
                      tableData.value = res.data.list.itemas;
                      total.value = res.data.list.total;
                  }).catch(err => {
                      console.info(err)
                  })

                }
                
                fill();

                return {
                    tableData,
                    fill,
                    currentPage,
                    pageSize,
                    total,
                    handleSizeChange,
                    handleCurrentChange,
                };
            }
        });


        app.use(ElementPlus).mount('#app');

    </script>
</body>
</html>